<%--
  Created by IntelliJ IDEA.
  User: sn
  Date: 2020/8/20
  Time: 20:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>侧边下拉导航栏</title>
</head>
<style type="text/css">
    *{
        padding: 0;
        margin: 0;
    }
    html,body{
        height: 1000px;
    }
    .wrap{
        width: 188px;
        height: 100%;
        background-color: #3a3a3a;
    }
    .header{
        width: 188px;
        height: 35px;
        font-size: 22px;
        color: #fff;
        text-align: center;
        line-height: 35px;
    }
    .nav{
        width:188px;
        margin: 10px 0px 0;
    }
    .list{
        margin-bottom: 5px;
    }
    .list h2{
        position: relative;
        padding: 10px 0;
        text-align: center;
        font-size: 16px;
        color: #fff;
        transition: .5s;
    }
    .list h2.on{
        background-color: #393c4a;
    }
    .list i{
        position: absolute;
        right: 10px;
        top: 16px;
        border: 8px solid transparent;
        border-left-color: #fff;
        transform:rotate(0deg);
        transform-origin: 1px 8px;
        transition: .5s;
    }
    .list i.on{
        transform:rotate(90deg);
    }
    .hide{
        overflow: hidden;
        height: 0;
        transition: .5s;
    }
    .hide h5{
        padding: 10px 0;
        background-color: #282c3a;
        text-align: center;
        color:#fff;
        border-bottom:#42495d;
    }
    a:link,a:visited{
        text-decoration:none;  /*超链接无下划线*/
    }
    a:hover{
        text-decoration:underline;  /*鼠标放上去有下划线*/
    }
</style>
<body>
<div class="wrap">
    <div class="header">首页</div>
    <div class="nav">
        <ul>
            <li class="list">
                <h2><i></i>员工信息管理</h2>
                <div class="hide">
                    <h5><a href="https://www.baidu.com" style="color: white;" target="test">员工信息录入</a></h5>
                    <h5><a href="https://www.baidu.com" style="color: white;" target="test">员工信息修改</a></h5>
                    <h5><a href="https://www.baidu.com" style="color: white;" target="test">员工信息查询</a></h5>
                    <h5><a href="https://www.baidu.com" style="color: white;" target="test">员工信息删除</a></h5>
                </div>
            </li>
            <li class="list">
                <h2><i></i>供应商信息管理</h2>
                <div class="hide">
                    <h5><a href="https://www.baidu.com" style="color: white;" target="test">供应商信息录入</a></h5>
                    <h5><a href="https://www.baidu.com" style="color: white;" target="test">供应商信息修改</a></h5>
                    <h5><a href="https://www.baidu.com" style="color: white;" target="test">供应商信息查询</a></h5>
                    <h5><a href="https://www.baidu.com" style="color: white;" target="test">供应商信息删除</a></h5>
                </div>
            </li>
            <li class="list">
                <h2><i></i>商品信息管理</h2>
                <div class="hide">
                    <h5><a href="https://www.baidu.com" style="color: white;" target="test">商品信息录入</a></h5>
                    <h5><a href="https://www.baidu.com" style="color: white;" target="test">商品信息修改</a></h5>
                    <h5><a href="https://www.baidu.com" style="color: white;" target="test">商品信息查询</a></h5>
                    <h5><a href="https://www.baidu.com" style="color: white;" target="test">商品信息删除</a></h5>
                </div>
            </li>
            <li class="list">
                <h2><i></i>库存管理</h2>
                <div class="hide">
                    <h5><a href="https://www.baidu.com" style="color: white;" target="test">库存查询</a></h5>
                    <h5><a href="https://www.baidu.com" style="color: white;" target="test">库存预警</a></h5>
                </div>
            </li>
            <li class="list">
                <h2><i></i>考勤信息管理</h2>
                <div class="hide">
                    <h5><a href="https://www.baidu.com" style="color: white;" target="test">已打卡员工</a></h5>
                    <h5><a href="https://www.baidu.com" style="color: white;" target="test">未打卡员工</a></h5>
                </div>
            </li>
            <li class="list">
                <h2><i></i>系统维护</h2>
                <div class="hide">
                    <h5><a href="https://www.baidu.com" style="color: white;" target="test">权限分配</a></h5>
                </div>
            </li>
        </ul>
    </div>
</div>
<script>
    (function () {
        var oList = document.querySelectorAll('.list h2'),
            oHide = document.querySelectorAll('.hide'),
            oIcon = document.querySelectorAll('.list i'),
            lastIndex = 0;
        for(var i=0;i<oList.length;i++){
            oList[i].index = i;//自定义属性
            oList[i].isClick = false;
            oList[i].initHeight = oHide[i].clientHeight;
            oHide[i].style.height = '0';
            oList[i].onclick = function () {
                if(this.isClick){
                    oHide[this.index].style.height = '0';
                    oIcon[this.index].className = '';
                    oList[this.index].className = '';
                    oList[this.index].isClick = false;
                }
                else{
                    oHide[lastIndex].style.height = '0';
                    oIcon[lastIndex].className = '';
                    oList[lastIndex].className = '';
                    oHide[this.index].style.height = '220px';
                    oIcon[this.index].className = 'on';
                    oList[this.index].className = 'on';
                    oList[lastIndex].isClick = false;
                    oList[this.index].isClick = true;
                    lastIndex = this.index;
                }
            }
        }
    })();
</script>
</body>

